<template>
  <div class="follow-up-card">
    <!-- 顶部tab切换栏 -->
    <div class="card-tabs">
      <div
        class="card-title"
        @click="tabsFunction(0)"
        :class="{ active: isAactiveNames === 0 }"
      >
        收费项目
      </div>
      <div
        class="card-title"
        @click="tabsFunction(1)"
        :class="{ active: isAactiveNames === 1 }"
      >
        收费记录
      </div>
    </div>

    <!-- 折叠面板 -->
    <el-collapse
      v-model="activeNames"
      class="follow-up-collapse"
      v-if="isAactiveNames === 0 && feeList.length > 0"
    >
      <el-collapse-item
        :name="index"
        v-for="(item, index) in feeList"
        :key="index"
      >
        <template #title>
          <div class="collapse-title">
            <span class="diagnosis">{{
              userBase.getEnumData(item.projectCategory,'projectCategoryEnum')
            }}</span>
          </div>
        </template>
        <div class="collapse-content">
          <div
            style="display: flex; justify-content: space-between"
            v-for="value in item.projectList"
            :key="value.projectId"
          >
            <div class="info-row">
              <span class="label">{{ value.projectName }}</span>
            </div>
            <div class="info-row">
              <span class="label">￥{{ (value.price / 100).toFixed(2) }}</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div v-else-if="isAactiveNames === 0 && feeList.length == 0" style="height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;">
      <el-empty :image-size="100" :image="emptyImage" placeholder="暂无数据" />
    </div>
    <el-collapse
      v-model="activeNames"
      class="follow-up-collapse"
      v-if="isAactiveNames === 1 && recordList.length > 0"
    >
      <el-collapse-item
        :name="index"
        v-for="(item, index) in recordList"
        :key="index"
      >
        <template #title>
          <div class="collapse-title">
            <span class="diagnosis">{{ item.chargeTime }}</span>
          </div>
        </template>
        <div class="collapse-content">
          <div
            style="display: flex; justify-content: space-between"
            v-for="value in item.detailList"
            :key="value.projectId"
          >
            <div class="info-row">
              <span class="label">{{ value.itemName }}</span>
            </div>
            <div class="info-row">
              <span class="label"
                >￥{{ (value.subtotal / 100).toFixed(2) }}</span
              >
            </div>
          </div>
          <div style="font-weight: bold; font-size: 11px">费用合计</div>
          <div class="info-row paid-amount">
            <div class="label">合计：</div>
            <div class="label">{{ (item.totalAmount / 100).toFixed(2) }}</div>
          </div>
          <div class="info-row paid-amount">
            <div class="label">实付：</div>
            <div class="label">{{ (item.paidAmount / 100).toFixed(2) }}</div>
          </div>
          <div style="font-weight: bold; font-size: 11px; margin: 5px 0">
            收费信息
          </div>
          <div class="info-row paid-amount">
            <div class="label">收费人员：</div>
            <div class="label">{{ item.chargeBy }}</div>
          </div>
          <div class="info-row paid-amount">
            <div class="label">收费时间：</div>
            <div class="label">{{ item.chargeTime }}</div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div v-else-if="isAactiveNames === 1 && recordList.length == 0" style="height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;">
      <el-empty :image-size="100" :image="emptyImage" placeholder="暂无数据" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import { ref } from 'vue';
import stores from '@/store';
import { getAllFeeList, getRecordList } from '@/api/fee/index';
const props = defineProps<{
  patientId: number | null;
  patientDetail: any;
}>();
const isAactiveNames = ref(0);
const userBase = stores.useBaseDataStore();
const projectCategory = ref(userBase.getEnumSelect('projectCategoryEnum'));
// const projectCategoryText = (value: string) => {
//   const item = projectCategory.value.find((item: any) => item.value === value);
//   return item ? item.text : '';
// };
const feeList = ref<any>([]);
const recordList = ref<any>([]);
const getAllFeeListApi = async () => {
  const res = await getAllFeeList();
  if (res.code != '200') {

    return;
  }
  feeList.value = res.data;
};
watch(
  () => props.patientDetail,
   () => {
    getAllFeeListApi();
    isAactiveNames.value = 0;
  },{ immediate: true, deep: true }
);
const getRecordListApi = async () => {
  if (!props.patientDetail.orderId) {
    recordList.value = []
    return;
  }
  const res = await getRecordList({ orderId: props.patientDetail.orderId });
  if (res.code != '200') {

    return;
  }
  //console.log(res);
  recordList.value = res.data;
};
// 折叠面板控制
const activeNames = ref([0, 1, 2]);
const tabsFunction = (index: number) => {
  isAactiveNames.value = index;
  if (index == 0) {
    getAllFeeListApi();
  } else {
    getRecordListApi();
  }
};
</script>

<style scoped lang="scss">
.follow-up-card {
  border-radius: 8px;
  width: 280px;
  height: 100%;
  background-color: rgba(253, 253, 253, 0.6);
  overflow: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  :deep(.el-collapse-item__header) {
    background-color: transparent;
  }
}

.card-tabs {
  display: flex;
  width: 100%;
  background: transparent;
  justify-content: space-around;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #ededed;
}
.card-title {
  height: 48px;
  line-height: 48px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-size: 16px;
  cursor: pointer;
  background: transparent;
  transition: color 0.2s, background 0.2s;
}
.card-title.active {
  color: #222;
  font-weight: 700;
}

.diagnosis-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e7e7e7;
}

.diagnosis-name {
  font-size: 16px;
  color: #666;
}

.doctor-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.doctor-info:hover {
  opacity: 0.8;
}

.doctor-name {
  font-size: 14px;
  color: #666;
}

.visit-date {
  font-size: 14px;
  color: #666;
}

.expand-icon {
  font-size: 12px;
  color: #666;
  transition: transform 0.3s ease;
}

.expand-icon.rotated {
  transform: rotate(180deg);
}

.follow-up-collapse {
  border: none;
  padding: 0px 8px 10px 8px;
}

:deep(.el-collapse-item__header) {
  border: none;
  border-radius: 6px;
}

:deep(.el-collapse-item__arrow) {
  transition: transform 0.3s ease;
  transform: rotate(-90deg); /* 默认状态(关闭时)向上 */
}

:deep(.el-collapse-item__arrow.is-active) {
  transform: rotate(90deg); /* 展开状态(打开时)向下 */
}
:deep(.el-collapse-item__wrap) {
  background: transparent;
}
:deep(.el-collapse-item__content) {
  padding: 16px 8px 16px 8px;
  background: transparent;
  border-radius: 0 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #dcdcdc;
}

.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.diagnosis {
  color: #333;
  font-weight: bold;
  font-size: 13px;
}

.action-btn {
  font-size: 14px;
  color: #00b3b3;
  cursor: pointer;
}

.collapse-content {
  font-size: 12px;
  line-height: 1.6;
}

.info-row {
  margin-bottom: 5px;
}

.label {
  color: #666;
  margin-right: 8px;
  flex-shrink: 0;
}

.value {
  color: #333;
  flex: 1;
}
.tcm-box {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px dashed #dcdcdc;
  gap: 0;
}
.tcm-box .info-row {
  width: 33.33%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
  padding: 8px 0;
}
.tcm-box .label {
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}
.active {
  color: #222;
  font-weight: 700;
}
.paid-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
